<!-- components/UserInfoPopup.vue -->
<template>
  <div class="user-info-popup">
    <div v-loading="loading">
      <div class="user-header">
        <el-avatar :size="60" :src="userInfo.list.avatarUrl || img " />
        <el-icon :size="20" v-if="userInfo.list.sex === '男'" style="color: #0742b1"><Female /></el-icon>
        <el-icon :size="20" v-if="userInfo.list.sex === '女'" style="color: #df7bc3"><Male /></el-icon>
        <h3>{{ userInfo.list.userName || "????????"}}</h3>
      </div>
      <el-divider />

      <div class="user-details">
        <div class="detail-item">
          <span class="label">联系方式：</span>
          <span class="value">{{ userInfo.list.phone || '暂无' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">个性签名: </span>
          <span class="value">
            {{userInfo.list.likeself}}
          </span>
        </div>
        <div class="detail-item">
          <span class="label">历史订单：</span>
          <span class="value">{{ userInfo.orderCount || 0 }} 单</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import img from '@/assets/background.bmp';
import { ref, onMounted ,reactive} from 'vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {Female, Male} from "@element-plus/icons-vue";

const props = defineProps({
  userId: {
    type: Number,
    required: true
  }
})

const userInfo = reactive({
  userName: '',
  phone: '',
  avatarUrl: '',
  createdTime:'',
  sex:'',
  list:{},
})
const loading = ref(true)

const init =() =>{
  request.get('/Home/CarInformation',{
    params: {
      userId : props.userId,
    }
  }).then(res =>{
    if(res.code === '200'){
      userInfo.list = res.data;
    }else{
      ElMessage.error(res.msg)
    }
  })
}
onMounted(async () => {
  try {
    init();
  } catch (e) {
    console.error('获取用户信息失败:', e)
  } finally {
    loading.value = false
  }
})


</script>

<style scoped>
.user-info-popup {
  padding: 15px;
}

.user-header {
  text-align: center;
  margin-bottom: 10px;
}

.user-header h3 {
  margin: 10px 0 0;
  font-size: 16px;
}

.user-details {
  margin-top: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.label {
  width: 80px;
  color: #909399;
  font-size: 13px;
}

.value {
  flex: 1;
  color: #606266;
}

</style>